<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/china.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 男女  -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom 周末  -->
    <div id="week" style="width: 600px;height:400px;"></div>
    <%--  准备一个具备大小(宽高)的dom 中国地图  --%>
    <div id="myChina" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // $.ajax({
        //     url:"user/selectCount",
        //     dataType:"json",
        //     success:function (result) {
        //         var count = [];
        //         var sex = [];
        //         // console.log(result);
        //         $(result.users).each(function (index, obj) {
        //             count.push(obj.c);
        //             sex.push(obj.sex);
        //         })
        //         // 指定图表的配置项和数据
        //         var option = {
        //             title: {
        //                 text: '持明法洲用户男女比例'
        //             },
        //             tooltip: {},
        //             legend: {
        //                 data:['人数']
        //             },
        //             xAxis: {
        //                 data: sex
        //             },
        //             yAxis: {},
        //             series: [{
        //                 name: '人数',
        //                 type: 'bar',
        //                 data: count
        //             }]
        //         };
        //         // 使用刚指定的配置项和数据显示图表。
        //         myChart.setOption(option);
        //     }
        // })
        // 基于准备好的dom，初始化echarts实例
        var my = echarts.init(document.getElementById('week'));
        // $.ajax({
        //     url:"user/selectWeek",
        //     dataType:"json",
        //     success:function (result) {
        //         console.log(result.map1[0].c)
        //         // 指定图表的配置项和数据
        //         var option1 = {
        //             title: {
        //                 text: '近三周活跃人数'
        //             },
        //             tooltip: {},
        //             legend: {
        //                 data:['活跃度']
        //             },
        //             xAxis: {
        //                 data: ['第一星期','第二星期','第三星期']
        //             },
        //             yAxis: {},
        //             series: [{
        //                 name: '活跃人数',
        //                 type: 'line',
        //                 data: [result.map1[0].c,result.map2[0].c,result.map3[0].c]
        //             }]
        //         };
        //         // 使用刚指定的配置项和数据显示图表。
        //         my.setOption(option1);
        //     }
        // })
        // 基于准备好的dom，初始化echarts实例  中国地图
        var myChina = echarts.init(document.getElementById('myChina'));
        // $.ajax({
        //     url:"user/selectChina",
        //     dataType:"json",
        //     success:function (result) {
        //         console.log(result)
        //         var option3 = {
        //             backgroundColor: '#FFFFFF',
        //             title: {
        //                 text: '全国地图大数据',
        //                 left:'center'
        //             },
        //             tooltip : {
        //                 trigger: 'item'
        //             },
        //             legend: {
        //                 orient: 'vertical',
        //                 left: 'left',
        //                 data:['用户人数']
        //             },
        //             //左侧小导航图标
        //             visualMap: {
        //                 min: 0,
        //                 max: 25000,
        //                 left: 'left',
        //                 top: 'bottom',
        //                 text:['高','低'],// 文本，默认为数值文本
        //                 calculable : true
        //             },
        //             toolbox: {
        //                 show: true,
        //                 orient: 'vertical',
        //                 left: 'right',
        //                 top: 'center',
        //                 feature: {
        //                     mark: {show: true},
        //                     dataView: {show: true, readOnly: false},
        //                     restore: {show: true},
        //                     saveAsImage: {show: true}
        //                 }
        //             },
        //             //配置属性
        //             series: [{
        //                 name: '用户人数',
        //                 type: 'map',
        //                 mapType: 'china',
        //                 roam: false,
        //                 label: {
        //                     normal: {
        //                         show: false  //省份名称
        //                     },
        //                     emphasis: {
        //                         show: true
        //                     }
        //                 },
        //                 data:result
        //             }]
        //         };
        //         //使用制定的配置项和数据显示图表
        //         myChina.setOption(option3);
        //     }
        // })
        $.ajax({
            url:"user/selectAll",
            dataType:"json",
            success:function (result) {
                // 指定图表的配置项和数据  男女比例
                console.log(result);
                console.log(result.count[0].c);
                console.log(result.a1[0].c);

                var option = {
                    title: {
                        text: '持明法洲用户男女比例'
                    },
                    tooltip: {},
                    legend: {
                        data:['人数']
                    },
                    xAxis: {
                        data: ['男','女']
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: [result.count[0].c,result.count[1].c]
                    }]
                };
                // 指定图表的配置项和数据   近几周活跃人数
                var option1 = {
                    title: {
                        text: '近三周活跃人数'
                    },
                    tooltip: {},
                    legend: {
                        data:['活跃度']
                    },
                    xAxis: {
                        data: ['第一星期','第二星期','第三星期']
                    },
                    yAxis: {},
                    series: [{
                        name: '活跃人数',
                        type: 'line',
                        data: [result.a1[0].c,result.a2[0].c,result.a3[0].c]
                    }]
                };
                //   地图   各省份用户人数
                var option3 = {
                    backgroundColor: '#FFFFFF',
                    title: {
                        text: '全国地图大数据',
                        left:'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['用户人数']
                    },
                    //左侧小导航图标
                    visualMap: {
                        min: 0,
                        max: 25000,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],// 文本，默认为数值文本
                        calculable : true
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    //配置属性
                    series: [{
                        name: '用户人数',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: false  //省份名称
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:result.china
                    }]
                };
                //使用制定的配置项和数据显示图表
                myChina.setOption(option3);
                // 使用刚指定的配置项和数据显示图表。
                my.setOption(option1);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    </script>
</body>
</html>
